window.addEventListener('load', function () {
    let arr = [
        { name: '全部', keyword: '身份证实名', insew: 'false' },
        { name: '生活服务', keyword: '服务', insew: 'false' },
        { name: '金融科技', keyword: '科技', insew: 'false' },
        { name: '交通地理', keyword: '地理', insew: 'false' },
        { name: '充值缴费', keyword: '缴费', insew: 'false' },
        { name: '数据智能', keyword: '智能', insew: 'false' },
        { name: '企业工商', keyword: '工商', insew: 'false' },
        { name: '应用开发', keyword: '开发', insew: 'false' },
        { name: '电子商务', keyword: '商务', insew: 'false' },
        { name: '吃喝玩乐', keyword: '钱', insew: 'false' },
        { name: '文娱视频', keyword: '视频', insew: 'false' },
        { name: '免费接口大全', keyword: '接口', insew: 'false' },
        { name: '短信', keyword: '短信', insew: 'false' },
        { name: '汽车', keyword: '汽车', insew: 'false' },
        { name: '核验', keyword: '核验', insew: 'false' },
        { name: '最早发布', keyword: '发布', insew: 'false' },
        { name: 'API私有化部署', keyword: 'API', insew: 'false' },
    ]

    //遍历数据 拼接结构
    arr.forEach(function (v) {
        // console.log(v)

        //创建标签
        let dom = document.createElement('li'); //创建ul下的li 

        //添加属性
        dom.setAttribute('keyword', v.keyword);

        //判定是否加粗
        if (v.isBold) {
            dom.setAttribute('class', 'fblod');
        }
        //添加内容
        dom.textContent = v.name;

        //向指定的apiCate添加新的元素
        eat.appendChild(dom)
    })


    //搜索框
    // 获取所有li
    let lis = document.querySelectorAll('#eat a')
    let name = document.querySelectorAll('#name');
    let keyWord = document.querySelectorAll('#keyword');

    //遍历
    lis.forEach(function (v) {
        // console.log(v)
        v.addEventListener('click', function () {
            let cont = this.textContent;//获取当前li的内容
            let keyw = this.getAttribute('keyword');//获取li的keyword
            name.textContent = cont;   //添加name
            keyWord.placeholder = keyw;

            //清除所有li的active

            lis.forEach(function (vv) {
                vv.classList.remove('active')
                this.classList.add('active') //给当前元素添加active 其他的li去掉active
            })


        })

        //api列表内容数据渲染
        let arr = [
            { imgUrl: './imgs/API_01.jpg', title: '2021出行防疫政策指南', price: '免费', isSpecial: 'false' },
            { imgUrl: './imgs/API_02.jpg', title: '身份证实名认证', price: '￥0.2000/次', isSpecial: 'false' },
            { imgUrl: './imgs/API_03.jpg', title: '天气预报', price: '免费', isSpecial: 'false' },
            { imgUrl: './imgs/API_04.jpg', title: '银行卡四元素校验', price: '￥0.3360/次', isSpecial: 'false' },
            { imgUrl: './imgs/API_05.jpg', title: '短信API服务', price: '￥0.0400/次', isSpecial: 'false' },


        ]
    })
    function rander(currentPage, sPages) {
        //保存结构
        let apiContHTML = '';

        //获取想要的数据  截取数组 slice(开始索引，结束索引)  ----包含开始 不包含结束
        let arr = apiContData.slice(currentPage, sPages);

        arr.forEach(function (v, i) {   //遍历数据
            // console.log(v)

            //拼接结构
            apiContHTML += `
            <li class="rel">
                <span class="tips ${v.ispacial ? 'on' : ''}">企业专用</span>
                <div class='two'>
                <img src="${v.imgUrl}" alt="">
                <p class="mt20">${v.title}</p>
                <p class="${v.price == '免费' ? 'green' : 'red'}">${v.price}</p>
                </div>
                <button>申请数据</button>
            </li>`
        });

        {/* 将拼接好的数据添加到指定位置 */ }
        getEle('#apiContentlist').innerHTML = apiContHTML;
    }

    //调用
    function rander(currentPage, sPages) {
        //分页点击事件
        let pagesA = getEleAll('#pagesList a');
        pagesA.forEach(function () {
            pagesA.addEventListener('click', function () {
                // console.log(this)

                //获取当前a的页码值
                let pageIndex=this.textContent;
                if(pageIndex==1){ //第一页 默认显示
                    //currentPage=0;
                }else{
                    // currentPage=(pageIndex-1)*sPages;
                }
                currentPage=(pageIndex-1)*sPages;
                rander(currentPage,pageIndex*sPages);

            })
        })
    };







})